<template>
    <el-dialog
        model-value="imageDialogVisible"
        title="食品大类图片更换"
        width="30%"
        @close="handleClose"
        center
    >
        <el-form
            ref="formRef"
            :model="form"
            label-width="100px"
            style="text-align: center"
        >
            <el-upload
                :headers="headers"
                class="avatar-uploader"
                :action="getServerUrl()+'/bigType/uploadImage'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
            >
                <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus/>
                </el-icon>
            </el-upload>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
          <el-button type="primary" @click="handleConfirm">确认更换</el-button>
      </span>
        </template>
    </el-dialog>
</template>

<script setup>
import {defineEmits, defineProps, ref, watch} from "vue";
import axios from 'axios'
import {getServerUrl} from '@/utils/request'
import {ElMessage} from 'element-plus'
import {Plus} from '@element-plus/icons-vue';

const tableData = ref([])

let rowData = {};

const props = defineProps(
    {
        imageDialogValue: {
            type: Object,
            default: () => {
            },
            required: true
        },
        rowData: {}
    }
)

const headers = ref({
    token: window.sessionStorage.getItem("token")
})

const form = ref({
    id: -1,
    image: ''
})

const formRef = ref(null)

const imageUrl = ref("")

watch(
    () => props.imageDialogValue,
    () => {
        form.value = props.imageDialogValue;
        imageUrl.value = getServerUrl() + '/admin/image/bigType/' + props.rowData.image
    },
    {deep: true, immediate: true}
)

const emits = defineEmits(['update:modelValue', 'initBigTypeList'])

const handleClose = () => {
    emits('update:modelValue', false)
}

const handleAvatarSuccess = (res) => {
    imageUrl.value = getServerUrl() + res.data.src
    form.value.image = res.data.title;
}
const beforeAvatarUpload = (file) => {
    const isJPG = file.type === 'image/jpeg'
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isJPG) {
        ElMessage.error('图片必须是jpg格式')
    }
    if (!isLt2M) {
        ElMessage.error('图片大小不能超过2M！')
    }
    return isJPG && isLt2M
}
const handleConfirm = async () => {
    let result = await axios.post("http://localhost:9091/admin/bigType/save", form.value);
    let data = result.data;
    if (data.code == 0) {
        ElMessage.success("执行成功!")
        formRef.value.resetFields();
        emits("initBigTypeList")
        handleClose();
    } else {
        ElMessage.error(data.msg);
    }
}
</script>

<style>

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
